import React from 'react';
import classNames from 'classnames';
import './HeadBoolPanel.less';
import { noop } from '../../utils';

export interface HeadBoolPanelProps {
  templateConfig: TemplatePropertyConfig;
  value: number;
  onChange?: (value: number) => void;
  disabled?: boolean;
}

export function HeadBoolPanel({
  templateConfig,
  onChange = noop,
  value,
  disabled: outerDisabled,
}: HeadBoolPanelProps) {
  console.log("value:", value);
  const {
    id,
    name,
    mode = '',
    define: {
      mapping = {} as any,
    } = {},
  } = templateConfig || {};

  const disabled = Boolean(outerDisabled) || mode.indexOf('w') === -1;

  return (
    <div 
      className={classNames("head-bool-panel", {
        disabled,
      })}
    >
      <div className="power-switch">
        <div
          id="power-switch-body_1"
          className="power-switch-body off"
          onClick={() => {
            if (disabled) 
              return;
            
            if ((value & 0x01) != 0)
            {
              value &= ~0x01;
            }
            else
            {
              value |= 0x01;
            }
            onChange(value);
          }}
        >
          <div id="power-switch-icon_1" className="power-switch-icon off" />
        </div>
        <div
          id="power-switch-body_2"
          className="power-switch-body off"
          onClick={() => {
            if (disabled) 
              return;
            
            if ((value & 0x02) != 0)
            {
              value &= ~0x02;
            }
            else
            {
              value |= 0x02;
            }
            onChange(value);
          }}
        >
          <div id="power-switch-icon_2" className="power-switch-icon off" />
        </div>
        <div
          id="power-switch-body_3"
          className="power-switch-body off"
          onClick={() => {
            if (disabled) 
              return;

            if ((value & 0x04) != 0)
            {
              value &= ~0x04;
            }
            else
            {
              value |= 0x04;
            }
            onChange(value);
          }}
        >
          <div id="power-switch-icon_3" className="power-switch-icon off" />
        </div>
      </div>

      <div className="bool-panel-content">
        3路开关
        {/* {name}: {value} */}
      </div>
    </div>
  );
}

